<style>
    html,
    body {
        background: none;
    }

    .bg {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .wrap {
        background: #fff;
        width: 100vw;
        position: fixed;
        bottom: 0;
        left: 0;
        border-radius: 10px 10px 0 0;
    }

    /*  */
    .top {
        padding: 10px;
        background: rgba(102, 61, 251, 0.1);
        color: #666666;
        font-size: 14px;
    }

    .top .title {
        font-size: 16px;
        font-weight: bold;
    }

    /* 刷新 */
    .reflash {
        width: 15px;
        margin-left: 5px;
    }

    /* 列表 */
    .ul {
        max-height: 50vh;
        overflow-y: auto;
    }

    .ul .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666666;
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .money {
        text-align: right;
    }

    .money b {
        font-size: 28px;
        font-weight: bold;
    }

    .chong-btn {
        background: rgba(102, 61, 251, 0.1);
        width: 30vw;
        margin: 0 10px;
        height: 40px;
        border-radius: 20px;
        ;
    }

    .pay-btn {
        width: calc(70vw - 30px);
        height: 40px;
        border-radius: 20px;
        color: #fff;
    }

    .money-icon {
        background-image: url('../image/icon/m6.png');
        background-size: 100%;
        width: 30px;
        height: 30px;
        display: inline-block;
        background-repeat: no-repeat;
    }

    .btn {
        background: rgba(102, 61, 251, 0.1);
        color: #663DFB;
        font-size: 14px;
        border-radius: 3px;
        padding: 5px 0;
        width: 65px;
    }
</style>

<div id="chong">
    <div class="bg" onclick="closeMoneyFrm();"></div>
    <div class="wrap">
        <div class="top flex-bt">
            <span class="title new-theme-color">支付</span>
            <div class="flex">
                <span>可用余额：<span class="new-theme-color">{{myMoney}}</span>| </span>
                <img onclick="getMyMoney();" class="reflash" src="../image/icon/m5.png" alt="">
            </div>
        </div>
        <ul class="ul">
            <!-- <li class="list">
                    <div class="left flex-c">
                        <i class="money-icon"></i>
                        <span class="name new-margin-l-10">10个</span>
                    </div>
                    <button class="btn">￥15.00</button>
                </li>
                <li class="list">
                    <div class="left flex-c">
                        <i class="money-icon"></i>
                        <span class="name new-margin-l-10">10个</span>
                    </div>
                    <button class="btn">￥150.00</button>
                </li> -->
            <li class="list" v-for="(m, index) in ffList">
                <div class="left flex-c">
                    <i class="money-icon"></i>
                    <span class="name new-margin-l-10">{{m.money}}</span>
                </div>
                <button class="btn" onclick="openApp()">￥{{m.price}}</button>
            </li>
        </ul>
    </div>
</div>
<script>
    var chongView = new Vue({
        el: '#chong',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            myMoney: 0,
        },
        methods: {
            _url: function (param, url) {
                _url(param, url);
            },
            // 充值
            submit: function (id, money) {
                // var buttons = ['微信', '支付宝'];
                // _action('请选择充值方式', buttons, function (bIndex) {
                //     if (bIndex != buttons.length + 1) {
                //         submit(id, money, bIndex-1);
                submit(id, money);
                //     }
                // })
            }
        }
    })
    getChong();
    getMyMoney();

    // 渲染充值列表
    function getChong() {
        _ajax('home/pay/topupcate', function (ret, err) {
            _log(JSON.stringify(ret));
            _log(JSON.stringify(err));
            if (ret && ret.code == 200) {
                chongView.ffList = ret.data;
            }
        })
    }

    // 获取余额
    function getMyMoney() {
        _ajax('user_volley.php', function (ret, err) {
            _log(JSON.stringify(ret));
            _log(JSON.stringify(err));
            if (ret && ret.code == 200) {
                chongView.myMoney = ret.volley;
            }
        }, {
            user_id: getCookie('userid'),
        })
    }
</script>
